<template>
  <div class="page">
    <!-- 头部-->
    <Header> </Header>
     <!-- 内容部分 -->
    <div class="tabs">
      <ul>
        <li>
          <router-link to="/goods">商品</router-link>
        </li>
        <li>
          <router-link to="/rating">评价</router-link>
        </li>
        <li>
          <router-link to="/seller">商家</router-link>
        </li>
      </ul>
       <div class="listContent">
        <router-view></router-view>
       </div>
    </div>
    <!-- 购物弹窗页面 -->
    <div class="carList" v-show="$store.state.show">
      <!-- 遮影     -->
      <div class="mask"></div>
      <!-- 购物车内容 -->
      <div class="box">
        <p class="p1">
            <span>购物车</span>
            <span @click="clear">清空</span>
        </p>
      <ul>
        <li v-for="item in carList" :key="item.
        name">
          <h4>{{ item.name }}</h4>
          <div>
            <span>￥{{ item.price * item.count
            }}</span>
          <Btns :item="item"></Btns>
          </div>
        </li>
      </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./header.vue"
import Btns from "./view/tabs/btns.vue"
import { mapState } from "vuex";
import store from "./store/indexStore.js";
export default {
  data () {
    return {}
  },
  components:{
    Header,
    Btns,
  },
  computed: {
    ...mapState(["carList"]),
  },
  methods:{
    clear(){
      // this.carList.forEach((item)=>{
      //   item.count=0;
      // });
      this.carList.splice(0)
      console.log( this.carList)
    },
  }
}
</script>

<style  scoped>
*{
  margin: 0;
  padding: 0;
}
.page{
  width: 400px;
  height: 685px;
  margin: 0 auto;
  position: relative;
}
.tabs{
  width: 400px;
}
.tabs ul{
  width: 400px;
  height: 40px;
  border-bottom: 2px solid rgba(7,17,27,0.1);
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
}
.tabs ul li{
  margin-left: 0;
 list-style: none;

}
.tabs ul li a{
  position: relative;
  text-decoration: none;
  color: black;
}
.tabs ul li a:hover{
  color: red;
  background-color: white;
}
.page .carList {
  position: absolute;
  left: 0;
  bottom: -48px;
  width: 100%;
  height: 780px;
  /* z-index: 40; */
  /* background-color: red; */
}

.page .carList .mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 720px;
  z-index: 50;
  background: rgba(7, 17, 27, 0.6);
}
.page .carList .box{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 340px;
  background-color: white;
  z-index: 60;
}
.page .carList .box p{
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  height: 40px;
  background-color: #f3f5f7;
  line-height: 40px;
  /* color: aqua; */
  color: rgb(66, 63, 63);
  border-bottom: 1px solid rgb(176, 176, 175);
}
.page .carList .box p span:nth-child(2):hover{
  color: rgb(0, 160, 220);
}
.page .carList ul {
  /* position: absolute;
  bottom: 50px; */
  width: 100%;
  /* left: 0; */
  height: 340px;
  /* background: red; */
}
.carList ul li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 10PX;
  display: flex;
  justify-content: space-between;
  border-bottom: 1PX solid rgb(234, 228, 228, 0.5);

}
.carList ul li div{
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
}
.carList ul li div span{
  font-size: 20px;
  line-height: 40px;
  font-weight: 800;
  color: red;
  margin-right: 10px;
}
.listContent{
  width: 400px;
  height:600px;
  margin: 0 auto;
  padding: 0;
}
</style>